<template>
  <el-card shadow="never">
    <el-form class="mt20 ml10 mr10" :model="form" ref="formRef" :rules="rules" label-width="160px">
      <el-tabs v-model="state.activeName">
        <el-tab-pane label="生成配置" name="1">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="表名">
                <el-input disabled v-model="form.tableName"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="表注释" prop="tableComment">
                <el-input v-model="form.tableComment" placeholder="请输入表注释"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="类名称" prop="className">
                <el-input v-model="form.className" placeholder="请输入类名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上级菜单">
                <custom-tree-select v-model:value="form.parentMenuId" :options="state.menuList" placeholder="请选择上级菜单"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="包名称" prop="packageName">
                <el-input v-model="form.packageName" placeholder="请输入包名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="请求映射风格" prop="requestMappingStyle">
                <el-select v-model="form.requestMappingStyle" clearable placeholder="请选择请求映射风格">
                  <el-option label="boot设计风格" :value="1"/>
                  <el-option label="restful设计风格" :value="2"/>
                  <el-option label="全部小写设计风格" :value="3"/>
                  <el-option label="中横线设计风格" :value="4"/>
                  <el-option label="下划线设计风格" :value="5"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="模块名称" prop="moduleName">
                <el-input v-model="form.moduleName" placeholder="请输入模块名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生成ID类型枚举" prop="idType">
                <el-select v-model="form.idType" placeholder="请选择生成ID类型枚举">
                  <el-option label="AUTO" value="AUTO"/>
                  <el-option label="NONE" value="NONE"/>
                  <el-option label="INPUT" value="INPUT"/>
                  <el-option label="ASSIGN_ID" value="ASSIGN_ID"/>
                  <el-option label="ASSIGN_UUID" value="ASSIGN_UUID"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="作者" prop="author">
                <el-input v-model="form.author" placeholder="请输入作者"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="默认降序排列名称">
                <el-input v-model="form.defaultOrderColumnName" placeholder="如id、create_time，如果为空，则不指定默认排序"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否生成管理后端">
                <el-radio-group v-model="form.generatorBackend">
                  <el-radio :label="true" border>是</el-radio>
                  <el-radio :label="false" border>否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否校验字段">
                <el-radio-group v-model="form.validateField">
                  <el-radio :label="true" border>是</el-radio>
                  <el-radio :label="false" border>否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否生成App后端">
                <el-radio-group v-model="form.generatorAppBackend">
                  <el-radio :label="true" border>是</el-radio>
                  <el-radio :label="false" border>否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否启用日志注解">
                <el-radio-group v-model="form.enableLog">
                  <el-radio :label="true" border>是</el-radio>
                  <el-radio :label="false" border>否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否生成前端">
                <el-radio-group v-model="form.generatorFrontend">
                  <el-radio :label="true" border>是</el-radio>
                  <el-radio :label="false" border>否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否启用权限编码">
                <el-radio-group v-model="form.enablePermission">
                  <el-radio :label="true" border>是</el-radio>
                  <el-radio :label="false" border>否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="表单布局">
                <el-select v-model="form.formLayout" placeholder="请选择表单布局">
                  <el-option label="一行一列" :value="1"/>
                  <el-option label="一行两列" :value="2"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生成方式">
                <el-select v-model="form.generatorType" placeholder="请选择生成方式">
                  <el-option label="zip压缩包" :value="1"/>
                  <el-option label="自定义路径" :value="2"/>
                </el-select>
              </el-form-item>
            </el-col>
            <template v-if="form.generatorType===2">
              <el-col>
                <el-form-item label="后端生成路径">
                  <el-input v-model="form.customBackendPath" placeholder="请输入后端生成路径"/>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="前端生成路径">
                  <el-input v-model="form.customFrontendPath" placeholder="请输入前端生成路径"/>
                </el-form-item>
              </el-col>
            </template>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="字段信息" name="2">
          <el-table :data="form.columns" border>
            <el-table-column prop="columnName" width="120" label="字段名"/>
            <el-table-column prop="columnCustomComment" width="150" label="字段描述">
              <template  #default="{row}">
                <el-input v-model="row.columnCustomComment"/>
              </template>
            </el-table-column>
            <el-table-column prop="columnType" width="110" label="字段类型"/>
            <el-table-column prop="propertyName" width="100" label="属性名称"/>
            <el-table-column prop="propertyType" width="97" label="属性类型"/>
            <el-table-column prop="isAdd" width="53" label="新增">
              <template  #default="{row}">
                <el-checkbox v-model="row.isAdd"/>
              </template>
            </el-table-column>
            <el-table-column prop="isUpdate" width="53" label="编辑">
              <template  #default="{row}">
                <el-checkbox v-model="row.isUpdate"/>
              </template>
            </el-table-column>
            <el-table-column prop="isList" width="53" label="列表">
              <template  #default="{row}">
                <el-checkbox v-model="row.isList"/>
              </template>
            </el-table-column>
            <el-table-column prop="isQuery" width="53" label="查询">
              <template  #default="{row}">
                <el-checkbox v-model="row.isQuery"/>
              </template>
            </el-table-column>
            <el-table-column prop="isRequired" width="53" label="必填">
              <template  #default="{row}">
                <el-checkbox v-model="row.isRequired"/>
              </template>
            </el-table-column>
            <el-table-column prop="queryType" width="105" label="查询方式">
              <template  #default="{row}">
                <el-select v-model="row.queryType" placeholder="请选择查询方式">
                  <el-option label="=" :value="1"/>
                  <el-option label="!=" :value="2"/>
                  <el-option label=">" :value="3"/>
                  <el-option label=">=" :value="4"/>
                  <el-option label="<" :value="5"/>
                  <el-option label="<=" :value="6"/>
                  <el-option label="like" :value="7"/>
                  <el-option label="日期范围" :value="8"/>
                  <el-option label="日期时间范围" :value="9"/>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="formType" width="125" label="表单类型">
              <template  #default="{row}">
                <el-select v-model="row.formType" clearable placeholder="请选择表单类型">
                  <el-option label="单行文本" :value="1"/>
                  <el-option label="多行文本" :value="2"/>
                  <el-option label="数字框" :value="3"/>
                  <el-option label="单选框" :value="4"/>
                  <el-option label="复选框" :value="5"/>
                  <el-option label="下拉框" :value="6"/>
                  <el-option label="日期" :value="7"/>
                  <el-option label="日期时间" :value="8"/>
                  <el-option label="时间" :value="9"/>
                  <el-option label="文件上传" :value="10"/>
                  <el-option label="富文本" :value="11"/>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="dictType" width="110" label="字典类型">
              <template  #default="{row}">
                <el-select v-model="row.dictType" clearable placeholder="请选择">
                  <el-option v-for="item in state.dictTypeList" :key="item.id" :label="item.name" :value="item.code"/>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div class="flex-center mt10">
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button class="ml10" @click="cancel">返回</el-button>
      </div>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import {getGeneratorTableApi,updateGeneratorTableApi} from "@/api/code";
import {getAllSysMenuTreeList} from "@/api/menu";
import {getSysDictTypeListApi} from "@/api/dict";
import {ElMessage, FormInstance, FormRules} from "element-plus";

const route=useRoute();
const router=useRouter();
const formRef = ref<FormInstance>()

const state=reactive({
  activeName:"1",
  menuList:[],
  dictList:[]
})

const form=ref({});

// 效验规则
const rules = reactive<FormRules>({
  tableComment: [{required: true, message: '请输入表注释', trigger: 'blur'},],
  className: [{required: true, message: '请输入类名称', trigger: 'blur'},],
  moduleName: [{required: true, message: '请输入模块名称', trigger: 'blur'},],
  packageName: [{required: true, message: '请输入包名称', trigger: 'blur'},],
  author: [{required: true, message: '请输入作者', trigger: 'blur'},],
  idType: [{required: true, message: '请选择生成ID类型枚举', trigger: 'change'},],
  requestMappingStyle: [{required: true, message: '请选择请求映射风格举', trigger: 'change'},],
})

// 获取详情信息
const getGeneratorTable =async () => {
  const res=await getGeneratorTableApi(route.query.tableName as string);
  form.value = Object.assign({}, form.value, res);
  if(!form.value.idType)form.value.idType="ASSIGN_ID";
  if(!form.value.parentMenuId)form.value.parentMenuId=0;
  if(!form.value.requestMappingStyle)form.value.requestMappingStyle=1;
}

// 获取所有菜单
const getTableList = () => {
  getAllSysMenuTreeList({}).then(res => {
    state.menuList = [{
      id: 0,
      name: '根菜单',
      children: res||[]
    }];
  })
}
// 获取字典数据
const getSysDictTypeList =async () => {
  state.dictTypeList=(await getSysDictTypeListApi({pageSize:9999}))||[];
}

// 提交
const submit =async () => {
  if (!formRef.value) return;
  const valid = await formRef.value.validate().catch(() => {
  });
  if (!valid) return false;
  await updateGeneratorTableApi(form.value);
  ElMessage.success('生成成功');
  router.back();
}

const cancel = () => {
  router.back();
}

getTableList();
getSysDictTypeList();
getGeneratorTable();
</script>

<style scoped>

</style>
